﻿@model HuaHan.WorkTicket.Domain.SizeGroup

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h5>尺码组设定</h5>
</div>
<div class="modal-body">
    @using (Ajax.BeginForm("CreateAndEdit", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "SuccessCreate", OnFailure = "FailureCreate" }, new { @class = "form-horizontal", id = "form1" }))
    {     
        @Html.HiddenFor(c => c.SizeGroupID)
        @Html.HiddenFor(c => c.CreatedAt)
        @Html.HiddenFor(c => c.UpdatedAt)
        @Html.Hidden("hdSelectedSize",ViewData["HideValue"])
        
        
        <div class="box-content">
            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#info">基本信息</a></li>
                <li class=""><a href="#contact">选择尺码</a></li>
            </ul>

            <div id="myTabContent" class="tab-content">
                <div class="tab-pane active" id="info">

                    <div class="control-group">
                        @Html.LabelFor(c => c.Name, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(c => c.Name, new { @class = "input-xlarge focused" })
                            @Html.ValidationMessageFor(c => c.Name)
                        </div>
                    </div>

                    <div class="control-group">
                        @Html.LabelFor(c => c.Description, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(c => c.Description, new { @class = "input-xlarge focused" })
                        </div>
                    </div>

                    <div class="control-group">
                        @Html.LabelFor(c => c.IsValid, new { @class = "control-label" })
                        <div class="controls">
                            <label class="checkbox">
                                @Html.CheckBoxFor(c => c.IsValid, new { @class = "input-xlarge focused" })
                            </label>
                        </div>
                    </div>

                    <div class="control-group">
                        @Html.LabelFor(c => c.Remark, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextAreaFor(c => c.Remark, new { @class = "input-xlarge focused" })
                        </div>
                    </div>


                </div>
                <div class="tab-pane" id="contact">
                    <table>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td> @Html.ListBox("lstSize", ViewData["SizeList"] as IEnumerable<SelectListItem>, new {@class="multiselect", @size = 8 })</td>
                            <td><button id="btnRightSingal" class="btn" style="margin:5px;" >select</button>
                        <br />
                        <button id="btnLeftSingal" class="btn" style="margin-left:5px;" >remove</button></td>
                            <td>
                                @Html.ListBoxFor(c=>c.Sizes, ViewData["SelectedSizeList"] as IEnumerable<SelectListItem>, new {@class="multiselect",@id="Sizes", @size = 8 })
                            </td>
                        </tr>
                     </table>
                       
                        
                                                   
                </div>

                    

            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="btnSubmit">保存</button>
            <input type="button" class="btn" id="btnCancel" value="取消" />
        </div>
    }

</div>

<script>
    $(document).ready(function () {
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

        $("#form1").validate({
            rules: {
                Name: {
                    required: true,
                    remote: {
                        type: "POST",
                        url: "/SizeGroup/CheckNameExisted",
                        dataType: "json",
                        data: {
                            Name: function () { return $("#Name").val(); },
                            ID: function () { return $("#SizeGroupID").val(); }
                        }
                    }
                }

            },
            messages: {
                Name: {
                    required: "名称不能为空",
                    remote: $.format("该名称已存在！")
                }
            },
            errorClass: "error",
            errorElement: "div"
        });

        $("#btnSubmit").click(function () {
            if ($("#form1").validate() == false) {
                return;
            }
        });

        $("#btnCancel").click(function () {
            $('#createAndEditModal').modal('hide');
            return;
        });

        $("#btnRightSingal").click(function () {
            var strTemp = $("#hdSelectedSize").val();
            if ($("#lstSize option:selected").length > 0) {
                $("#lstSize option:selected").each(function () {
                    $("#Sizes").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                    strTemp =strTemp + $(this).val() + "," + $(this).text() + ";";
                    $(this).remove();
                })

                $("#hdSelectedSize").val(strTemp);
            }
            return false;
        });

        $("#btnLeftSingal").click(function () {
            var strTemp = $("#hdSelectedSize").val();
            if ($("#Sizes option:selected").length > 0) {
                $("#Sizes option:selected").each(function () {
                    $("#lstSize").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                    strTemp.remove($(this).val() + "," + $(this).text() + ";");
                    $(this).remove();
                })

                $("#hdSelectedSize").val(strTemp);
            }
            return false;
        });

    });
</script>
@*    <div class="modal-footer">
        <a href="#" class="btn">关闭</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>*@



